<template>
    <view class="tab-block">
		<ul class='tab-list'>
			<li
				v-for="(item, index) in tabList"
				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@click="handlePush(item, index)"
				:key="index" >
				<view class="item-img-box">
					<image
						class="item-img"
						:src=" tabIndex == index ? item.selectedIconPath : item.iconPath" />
				</view>
				<view class="item-text font-20 " 
					:class="tabIndex == index ? 'specialColor': 'special'" >
				 {{item.text}}
				</view>
			</li>
		</ul>
        <!-- :class="{ specialColor: tabIndex == index}" -->
        <!-- 兼容iPhonex下面的小黑条 -->
        <view class="tab-bar" v-show="showTabBar === true"></view>
    </view>
</template>

<script>
    export default {
        props: {
            tabIndex: { //当前选中的tab项
                type: String,
                default: 0,
            },
        },
        data() {
            return {
            
                /*
                 * iconPath: 默认icon图片路径
                 * selectedIconPath: 选中icon图片路径 
                 * text: tab按钮文字
                 * pagePath:页面路径
                 * middleClass:该按钮所有的特殊样式类名
                 * tabList最小两项，最多五项
                 * tabList长度为奇数时，中间按钮才会突出显示
                 * 
                 */
				tabList: [{
					"pagePath": "../../pages/home/index",
					"iconPath": "../../static/icon/首页.png",
					"selectedIconPath": "../../static/icon/首页-fill.png",
					"text": "首页"
				},
				// {
				// 	"pagePath": "../../pages/activity/index",
				// 	"iconPath": "../../static/icon/发现.png",
				// 	"selectedIconPath": "../../static/icon/发现激活.png",
				// 	"text": "活动"
				// },
				{
					"pagePath": "../../pages/my/index",
					"iconPath": "../../static/icon/我的.png",
					"selectedIconPath": "../../static/icon/我的-fill.png",
					"text": "我的"
				}],
				showTabBar: false,
				showMiddleButton: false,
			};
        },
        computed: {
            getHeight() {
                return Number(this.height);
            },
        },
        mounted() {
            this.getSystemInfo()
            // this.setTabBar()
        },
        methods: {
            //点击按钮
            handlePush(item, index) {
                    uni.switchTab({
                            url: this.tabList[index].pagePath
                    })
                
                // if(index==1){
                //     uni.switchTab({
                //             url: this.tabList[index].pagePath
                //     })    
                // }
                // if(index==2){
                //     uni.switchTab({
                //             url: this.tabList[index].pagePath
                //     })    
                // }
                // if(index==3){
                //     uni.switchTab({
                //             url: this.tabList[index].pagePath
                //     })    
                // }
            },
            
            //兼容iPhoneX以上底部黑线条的显示
            getSystemInfo() {
                //获取系统信息
                uni.getSystemInfo({
                    success: (res) => {
                        // X及以上的异形屏top为44，非异形屏为20
                        if (res.safeArea.top > 20) {
                            this.showTabBar = true
                        }
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
    .special{
        color: #2d2967;
        // color: #2E2E31;
    }
    .specialColor{
        color: #E2FFA2;
    }
    .flex {
        display: flex;
        flex-flow: row wrap;
    }

    .flex-center {
        // align-items: center;
        // justify-content: center;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-middle {
        align-items: center;
    }
    .font-20 {
        font-size: 25rpx;
    }
    .tab-block {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        // background-size: contain;
        width:100vw;
        // width: 750rpx;
        .tab-listtab{
            padding-right: 50rpx;
            height:180rpx;
            display: flex;
            // flex-flow: row wrap;
            align-items: center;
            // justify-content: center;
            list-style: none;
            // width: 100rpx;
            border-top-right-radius: 40rpx;
            border-top-left-radius: 40rpx;
            background: rgb(77, 145, 255);
            box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.32);
        }
        .tab-list{
            height:130rpx;
            display: flex;
            // flex-flow: row wrap;
            align-items: center;
            // justify-content: center;
            
            list-style: none;
            // width: 100rpx;
            border-top-right-radius: 40rpx;
            border-top-left-radius: 40rpx;
            background: rgb(77, 145, 255);
            box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.32);
        }
        
        // .tab-list-default{

        // }
        // .tab-list-middle {
        //     position: relative;
        //     background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
        //     background-size: cover;
        // }
        .list-item {
            flex: 1;
            .item-img-box {
                width: 44rpx;
                height: 42rpx;
                margin-bottom: 9rpx;
                position: relative;
            }
            .item-img {
                width: 44rpx;
                height: 42rpx;
            }
        }
    }
</style>
